<template>
  <div class="auth-container">
    <div class="auth-tabs">
      <button 
        :class="['tab-btn', { active: currentTab === 'login' }]"
        @click="switchTab('login')"
      >
        登录
      </button>
      <button 
        :class="['tab-btn', { active: currentTab === 'register' }]"
        @click="switchTab('register')"
      >
        注册
      </button>
    </div>

    <div class="auth-content">
      <UserLogin 
        v-if="currentTab === 'login'"
        @switchToRegister="switchTab('register')"
        @loginSuccess="handleLoginSuccess"
      />
      <UserRegister 
        v-if="currentTab === 'register'"
        @switchToLogin="switchTab('login')"
        @registerSuccess="handleRegisterSuccess"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import UserLogin from './UserLogin.vue'
import UserRegister from './UserRegister.vue'

export default {
  name: 'AuthContainer',
  components: {
    UserLogin,
    UserRegister
  },
  setup() {
    const router = useRouter()
    const currentTab = ref('login')

    const switchTab = (tab) => {
      currentTab.value = tab
      // 更新URL但不触发路由守卫
      router.replace(`/${tab}`)
    }

    const handleLoginSuccess = (result) => {
      console.log('登录成功:', result)
      router.push('/chat')
    }

    const handleRegisterSuccess = (result) => {
      console.log('注册成功:', result)
      // 注册成功后切换到登录页面
      switchTab('login')
    }

    // 根据当前路由设置初始tab
    const currentRoute = router.currentRoute.value
    if (currentRoute.path === '/register') {
      currentTab.value = 'register'
    }

    return {
      currentTab,
      switchTab,
      handleLoginSuccess,
      handleRegisterSuccess
    }
  }
}
</script>

<style scoped>
.auth-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.auth-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 4px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}

.tab-btn {
  padding: 12px 30px;
  border: none;
  background: transparent;
  color: white;
  font-size: 16px;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tab-btn.active {
  background: white;
  color: #667eea;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.auth-content {
  width: 100%;
  max-width: 450px;
}

/* 覆盖子组件的容器样式 */
.auth-content :deep(.login-container),
.auth-content :deep(.register-container) {
  background: transparent;
  padding: 0;
  min-height: auto;
}

.auth-content :deep(.login-card),
.auth-content :deep(.register-card) {
  margin: 0;
}

@media (max-width: 480px) {
  .auth-tabs {
    width: 100%;
    max-width: 300px;
  }
  
  .tab-btn {
    flex: 1;
    padding: 10px 20px;
    font-size: 14px;
  }
}
</style>